<template>
  <a-card class="system__module" :bordered="false" :body-style="bodyStyle">
    <a-flex class="h-100" :gap="4" vertical>
      <Cropper v-if="cropperMode === 'edit'"></Cropper>
      <Preview :src="data?.src" v-else-if="cropperMode === 'view'" />
      <Upload v-else-if="cropperMode === 'upload'" />
    </a-flex>
  </a-card>
</template>

<script setup lang="ts">
import { bodyStyle } from '@/global/config/gen';
import Cropper from './cropper/Cropper.vue';
import { cropperImage, cropperMode, stencilSize } from './data/data';
import Preview from './preview/Preview.vue';
import Upload from './upload/Upload.vue';

const props = defineProps<{
  id: string;
  data?: {
    src: string;
    /* 默认裁剪区域，配置后不能改变裁剪的大小 */
    stencilSize?: {
      width: number;
      height: number;
    };
    /* 点击确定的回调 */
    callback: any;
    mode: 'view' | 'edit' | 'upload';
  };
}>();

provide('data', props);
watch(
  props,
  () => {
    if (props.data) {
      cropperImage.value = props.data.src;
      if (props.data.stencilSize) {
        stencilSize.value = props.data.stencilSize;
      }
      cropperMode.value = props.data.mode || 'upload';
    }
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped>
:deep(.ant-card) {
  box-shadow: none;
}
:deep(.ant-card-body) {
  padding: 4px 8px;
  height: 100%;
  overflow: hidden;
}
:deep(.vue-advanced-cropper__background) {
  background: #444;
}
</style>
